<template>
    <div>
        <!-- 导入轮播图 -->
        <mt-swipe :auto="3000">
            <mt-swipe-item  v-for="item in getLunboList" :key="item.url">
                <a :href="item.url"><img :src='item.img'></a>
            </mt-swipe-item>
        </mt-swipe>

        <!-- 导入六宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newsList">
                    <img src="../../images/media.jpg" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link> 
                </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photoList">
                    <span class="mui-badge">5</span><img src="../../images/share.jpg" alt="">
                    <div class="mui-media-body">图片分享</div></router-link>
                </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodsList">
                    <img src="../../images/cart.jpg" alt="">
                    <div class="mui-media-body">商品购买</div></router-link>
                </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/talk.jpg" alt="">
                    <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/video.jpg" alt="">
                    <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/call.jpg" alt="">
                    <div class="mui-media-body">联系我们</div></a></li>
        </ul> 
    </div>
</template>
<script>
export default {
    data(){
        return{
            getLunboList:[
                {title:'大麦官网',url:'http://damai.com',img:'https://img.alicdn.com/tps/i4/TB1U5hJUNTpK1RjSZFKSuu2wXXa.jpg'},
                {title:'小米官网',url:'http://mi.com',img:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ba61f901d45b4c764899f9916c0b8449.jpg'},
                {title:'京东官网',url:'http://jd.com',img:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b642c13442fc0ca455394f34e59a22b3.jpg'},
                {title:'传智播客',url:'http://itcast.cn',img:'http://www.itcast.cn/images/newslide/homepageandphone/20190305160342355.jpg'}
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
    .mint-swipe{
        height: 200px;
        .mint-swipe-item{
            width: 100%;
            height: 100%;
             img{
            width: 100%;
            height: 100%!important;
        }
        }
    }
    .mui-grid-view.mui-grid-9{
        background-color: white;
        img{
            width: 60px;
            height: 60px;
        }
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: none;
    }
    .mui-badge{
        top:12%!important;
        background-color: red;
    }
</style>